<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script>
    function btn(path,text){

         var img=document.getElementById("img");
         img.src=path;
        img.height="400";
        img.width="500";
         var json=document.getElementById("json");
         //json.innerText=text;
    }
    function netcal(){
        document.getElementById("k1").innerText="计算中...."

        setTimeout(function () {
            alert("计算完成" +
                "  \"Destroy\": {\n" +
                "  \"p1\":[{\"srcNode\": \"1\",\"destNode\": \"2\"}],\n" +
                "  \"p2\":[{\"srcNode\": \"1\",\"destNode\": \"2\"}],\n" +
                "  \"p3\":[{\"srcNode\": \"3\",\"destNode\": \"4\"}],\n" +
                "  \"p4\":[],\n" +
                "  \"p5\":[{\"srcNode\": \"5\",\"destNode\": \"8\"},{\"srcNode\": \"4\",\"destNode\": \"5\"},{\"srcNode\": \"3\",\"destNode\": \"5\"}],\n" +
                "  \"p6\":[{\"srcNode\": \"5\",\"destNode\": \"8\" },{\"srcNode\": \"4\",\"destNode\": \"5\"},{\"srcNode\": \"3\",\"destNode\": \"5\"}],\n" +
                "  \"p7\":[{\"srcNode\": \"5\",\"destNode\": \"6\"},{\"srcNode\": \"5\",\"destNode\": \"7\"}],\n" +
                "  \"p8\":[{\"srcNode\": \"1\",\"destNode\": \"6\"}],\n" +
                "  \"p9\":[{\"srcNode\": \"1\",\"destNode\": \"6\"}],\n" +
                "  \"p10\":[{\"srcNode\": \"1\",\"destNode\": \"6\"}],\n" +
                "  \"p11\":[{\"srcNode\": \"1\",\"destNode\": \"7\"},{\"srcNode\": \"1\",\"destNode\": \"8\"}],\n" +
                "  \"p12\":[{\"srcNode\": \"1\",\"destNode\": \"7\"},{\"srcNode\": \"1\",\"destNode\": \"8\"}],\n" +
                "  \"p13\":[{\"srcNode\": \"6\",\"destNode\": \"7\"},{\"srcNode\": \"5\",\"destNode\": \"7\"}],\n" +
                "  \"p14\":[{\"srcNode\": \"1\",\"destNode\": \"8\"},{\"srcNode\": \"4\",\"destNode\": \"7\"},{\"srcNode\": \"7\",\"destNode\": \"8\"}],\n" +
                "  \"p15\":[{\"srcNode\": \"2\",\"destNode\": \"8\" },{\"srcNode\": \"2\",\"destNode\": \"4\"},{\"srcNode\": \"3\",\"destNode\": \"8\"}],\n" +
                "  \"p16\":[{\"srcNode\": \"1\",\"destNode\": \"2\"},{\"srcNode\": \"2\",\"destNode\": \"3\"},{\"srcNode\": \"3\",\"destNode\": \"8\"}],\n" +
                "  \"p17\":[{\"srcNode\": \"2\",\"destNode\": \"4\"},{\"srcNode\": \"5\",\"destNode\": \"8\"},{\"srcNode\": \"4\",\"destNode\": \"7\"},{\"srcNode\": \"4\",\"destNode\": \"8\"}]\n" +
                "    }")
            document.getElementById("k1").innerText="网络层拓扑"
            var img1=document.getElementById("wangluo");
            img1.src="net.png"
            img1.height="400";
            img1.width="500";
        },2000)


    }
</script>

<table align="center">
    <tr>
        <td name="choice">
            <div>选择损坏的物理链路</div>
            <button onclick=btn("1-13.png","name:fiber-8\t\tsrcNode:1\t\tdestNode:6")>
            1-13
            </button>
            <button onclick=btn("1-14.png","name:fiber-2\t\tsrcNode:1\t\tdestNode:7\nname:fiber-3\t\tsrcNode:1\t\tdestNode:8")>
                1-14
            </button>
            <button onclick=btn("2-8.png","name:fiber-3\t\tsrcNode:2\t\tdestNode:8\nname:fiber-2\t\tsrcNode:2\t\tdestNode:4\nname:fiber-8\t\tsrcNode:3\t\tdestNode:8")>
                2-8
            </button>
            <button onclick=btn("4-11.png","name:fiber-5\t\tsrcNode:3\t\tdestNode:5\nname:fiber-2\t\tsrcNode:4\t\tdestNode:5\nname:fiber-7\t\tsrcNode:5\t\tdestNode:8")>
                4-11
            </button>

            <button onclick=btn("2-3.png","name:fiber-11\t\tsrcNode:1\t\tdestNode:2\nname:fiber-5\t\tsrcNode:2\t\tdestNode:3\nname:fiber-6\t\tsrcNode:3\t\tdestNode:8")>
                2-3
            </button>

            <button onclick=btn("7-14.png","name:fiber-2\t\tsrcNode:1\t\tdestNode:7\nname:fiber-3\t\tsrcNode:1\t\tdestNode:8")>
                7-14
            </button>
            <button onclick=btn("4-8.png","name:fiber-5\t\tsrcNode:2\t\tdestNode:4\nname:fiber-7\t\tsrcNode:4\t\tdestNode:7\nname:fiber-9\t\tsrcNode:4\t\tdestNode:8\nname:fiber-8\t\tsrcNode:5\t\tdestNode:8")>
                4-8
            </button>
            <button onclick=btn("3-4.png","name:fiber-1\t\tsrcNode:3\t\tdestNode:4")>
                3-4
            </button>
            <div id="json">

            </div>



        </td>

        <td name="net" width="600" height="500">
            <div id="k1">网络层拓扑</div>

            <img  src="" id="wangluo">

        </td>
    </tr>
    <tr>
        <td >
            <div>物理层拓扑</div>
            <div>
                <button onclick="netcal()">
                    导入网络层并计算
                </button>
            </div>

            <img src="phy.png" height="400" width="500" >



        </td>

        <td name="phy">
            <div>受影响网络层拓扑</div>
       <img src="" id="img">
        </td>
    </tr>
</table>



</div>
</body>
</html>